<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script>
    function fn1() {
      var a = 1
      var b = 2
      function fn2() {
        console.log(a)
      }
      function fn3() {
        console.log(b)
      }
      return {
        fn2,
        fn3
      }
    }
    const f = fn1()
  </script>
  <script>
    function Test() { // 组件函数
      var count = 0
      console.log('Test', count)

      function fn2() { // effect函数
        setTimeout(() => {
          console.log(count)
        }, 2000);
      }

      function fn3() { // 更新数据的函数
        count++
        console.log('fn3', count)
        Test()
      }

      return {
        fn2,
        fn3
      }
    }
    const {fn2, fn3}  = Test()
    fn2()
    fn3()
  </script>
</body>
</html>